<template>

  <el-dialog v-model="visible" title="新增小区" width="500px" @close="reset">
    <el-form :model="form" label-width="140px">

      <el-form-item label="小区名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="区域">
        <el-select v-model="form.areaId" placeholder="请选择区域" @change="onAreaChange" >
          <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="板块">
        <el-select v-model="form.plateId" placeholder="请选择板块">
          <el-option
              v-for="item in plateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>

      <el-form-item label="建筑年代">
        <el-input v-model="form.buildYears"></el-input>
      </el-form-item>

      <el-form-item label="物业价格(元/平)">
        <el-input v-model="form.propertyPrice"></el-input>
      </el-form-item>

      <el-form-item label="物业公司">
        <el-input v-model="form.propertyCompany"></el-input>
      </el-form-item>

      <el-form-item label="开发商">
        <el-input v-model="form.developer"></el-input>
      </el-form-item>

      <el-form-item label="小区房屋数目">
        <el-input v-model="form.houseNum"></el-input>
      </el-form-item>

      <el-form-item label="均价(万元/平)">
        <el-input v-model="form.averagePrice"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const visible   = ref(false)
const areaList  = ref([])
const plateList = ref([])

const form = ref({
  name: '', description: '', areaId: '', plateId: '',
  address: '', buildYears: '', propertyPrice: ''
})

/* --------- 公开方法：父组件通过 ref 调用 --------- */
function openModal (areas = []) {
  reset()
  // 直接接收父组件传来的区域数据
  areaList.value = areas
  visible.value = true
}
function close () { visible.value = false }

/* --------- 板块联动 --------- */
async function onAreaChange (areaId) {
  plateList.value = []
  form.value.plateId = ''
  if (!areaId) return
  const { data } = await axios.get(
      `/app-dev/community/findDictListByParentId/${areaId}`
  )
  if (data.code === 200) plateList.value = data.data
}

/* --------- 提交 --------- */
async function submit () {
  const { data } = await axios.post('/app-dev/community/save', form.value)
  if (data.code === 200) {
    ElMessage.success('新增成功')
    close()
    emit('saved')      // 通知父组件刷新列表
  } else {
    ElMessage.error(data.message || '保存失败')
  }
}
/* 重置表单 */
function reset () {
  Object.keys(form.value).forEach(k => (form.value[k] = ''))
  plateList.value = []
}

/* --------- 暴露给父组件 --------- */
const emit = defineEmits(['saved'])
defineExpose({ openModal })
</script>